<template>
  <div class="attestationNow-wrap">
    <common-back :content="headerTitle"
                 class="header"></common-back>
    <common-notice class="notice"></common-notice>
    <common-loading v-show="showLoading"></common-loading>
    <div class="money-info"
         v-show="!showLoading">
      <div class="money">{{money}}</div>
      <div class="desc">可用额度(元)</div>
      <div class="info-box">
        <div class="left-info">
          <div class="info-title">{{day}}</div>
          <div class="info-desc">借款天数</div>
        </div>
        <div class="right-info">
          <div class="info-title">{{use}}</div>
          <div class="info-desc">借款用途</div>
        </div>
      </div>
    </div>
    <div class="pay-info-list"
         v-show="!showLoading">
      <ul class="info-list">
        <li class="info-item"
            border-bottom-1px
            @click="handleChooseMoney(index,item)"
            v-for="(item,index) of priceList"
            :key="item.id">
          <div class="title">{{item.price}}元({{item.name}})</div>
          <i class="iconfont icon-xuanzhong"
             :class="{green: chooseIndex === index}"></i>
        </li>
        <li class="info-item"
            border-bottom-1px>
          <div class="title">邀请码(选填)</div>
          <input type="text"
                 placeholder="请输入邀请码(选填)"
                 class="input">
        </li>
      </ul>
      <div class="pay-title">支付方式</div>
      <ul class="pay-type-list">
        <li class="pay-type-item"
            border-bottom-1px
            @click="handleChooseType(index=0)">
          <div class="title">
            <svg class="icon-card"
                 aria-hidden="true">
              <use xlink:href="#icon--1"></use>
            </svg>
            <p class="pay-type-desc">银行卡支付</p>
          </div>
          <i class="iconfont icon-xuanzhong"
             :class="{green: typeIndex === 0}"></i>
        </li>
        <li class="pay-type-item"
            @click="handleChooseType(index=1)">
          <div class="title">
            <svg class="icon-card"
                 aria-hidden="true">
              <use xlink:href="#icon-zhifubao"></use>
            </svg>
            <p class="pay-type-desc">支付宝支付</p>
          </div>
          <i class="iconfont icon-xuanzhong"
             :class="{green: typeIndex === 1}"></i>
        </li>
      </ul>
    </div>
    <common-agreement @isShow="handleShow"
                      class="agreement-box"
                      @getProtocol="handleGetProtocol"
                      @changeIsSelect="handleChangeSelect"
                      :isSelect="isSelect"
                      v-show="!showLoading"></common-agreement>
    <common-button @submit="handleSubmit"
                   :content="buttonTitle"
                   v-show="!showLoading"></common-button>
    <div class="reminder"
         v-show="!showLoading">
      <p>温馨提示：</p>
      <p>一次通过，再借无忧。还款记录良好，可不断循环，并提高额度。</p>
    </div>
    <van-popup v-model="show"
               class="popup">
      <div class="agreement-content">
        {{protocol}}
      </div>
    </van-popup>
  </div>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonNotice from 'common/noticeBar/noticeBar'
import CommonAgreement from 'common/agreement/agreement'
import CommonButton from 'common/button/button'
import CommonLoading from 'common/loading/loading'
import { mapState } from 'vuex'
export default {
  name: 'attestationNow',
  components: {
    CommonBack,
    CommonNotice,
    CommonAgreement,
    CommonButton,
    CommonLoading
  },
  created () {
    this.getState()
  },
  computed: {
    ...mapState(['person', 'contact', 'bank'])
  },
  data () {
    return {
      headerTitle: '认证',
      chooseIndex: 1,
      typeIndex: 1,
      show: false,
      buttonTitle: '立即借款',
      isSelect: true,
      protocol: '',
      showLoading: true,
      money: '',
      day: '',
      use: '',
      priceList: [],
      service_id: ''
    }
  },
  methods: {
    handleChooseMoney (index, item) {
      this.chooseIndex = index
      this.service_id = item.id
      this.price = item.price
    },
    handleChooseType (index) {
      this.typeIndex = index
    },
    handleShow (flag) {
      this.show = flag
    },
    handleSubmit () {
      const flag = this.check()
      if (flag) {
        this.pay()
      }
    },
    pay () {
      this.$api.pay.order({
        service_id: this.service_id,
        amount: this.price
      })
        .then(this.postPaySucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    postPaySucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        window.location.href = data.payurl
      }
    },
    check () {
      if (!this.isSelect) {
        this.$toast({
          duration: 1000,
          message: '请确认协议'
        })
        return false
      }
      return true
    },
    handleChangeSelect () {
      this.isSelect = !this.isSelect
    },
    handleGetProtocol (content) {
      this.protocol = content
    },
    getState () {
      if (Number(this.person) === 1 && Number(this.contact) === 1 && Number(this.bank) === 1) {
        this.getDetail()
      } else {
        this.$router.push({
          path: '/borrow'
        })
      }
    },
    getDetail () {
      this.$api.borrow.getPageInfo()
        .then(this.getDetailSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    getDetailSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        this.showLoading = false
        const data = res.data
        this.money = data.borrow
        this.day = data.duration
        this.use = data.purpose
        this.priceList = data.service
        this.service_id = data.service[1].id
        this.price = data.service[1].price
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.attestationNow-wrap >>> .van-popup.popup
  border-radius 20px
  min-width 80%
  max-height 80%
  padding()
  padding-top 20px
  padding-bottom 20px

.attestationNow-wrap >>> .van-picker__cancel, .attestationNow-wrap >>> .van-picker__confirm
  font-size $shop_name
  display flex
  align-items center

.attestationNow-wrap >>> .van-picker__toolbar
  height 80px

.attestationNow-wrap >>> .van-picker-column__item
  font-size $shop_name

.notice >>> .icon-wrap i
  color #747D8C
  font-weight 500

.notice >>> .swiper-content
  color #747D8C
  font-weight 500

.notice
  background-color $common_bgc
  margin-bottom 20px

.attestationNow-wrap
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc_gray
  z-index 20
  overflow-y scroll
  padding()
  padding-top 108px
  padding-bottom 50px

  .header
    z-index 20

  .money-info
    background-color $common_bgc
    box-shadow 0px 6px 12px 0px rgba(47, 53, 66, 0.16)
    border-radius 24px
    width 100%
    padding-top 50px
    padding-left 32px
    padding-right 32px
    padding-bottom 32px
    box-sizing border-box
    margin-bottom 20px

    .money
      width 100%
      text-align center
      font-size 80px
      line-height 100px
      font-weight bold
      color $id_input

    .desc
      font-size $address
      line-height 48px
      font-weight 400
      color $icon_color
      text-align center
      margin-bottom 15px

  .info-box
    width 100%
    display flex
    justify-content space-between

    .left-info, .right-info
      width 292px
      height 145px
      background rgba(241, 242, 246, 1)
      border-radius 24px
      display flex
      justify-content center
      align-items center
      flex-direction column

      .info-title
        font-size $shop_name
        line-height 48px
        font-weight 400
        color $id_input

      .info-desc
        font-size $common_fz
        line-height 40px
        font-weight 400
        color rgba(116, 125, 140, 1)

  .pay-info-list
    width 100%
    background-color $common_bgc
    box-shadow 0px 6px 12px 0px rgba(47, 53, 66, 0.16)
    border-radius 24px
    padding-left 32px
    padding 32px
    box-sizing border-box
    margin-bottom 40px

    .info-list
      width 100%
      margin-bottom 24px

      .info-item
        height 110px
        display flex
        align-items center
        justify-content space-between
        font-size $address
        font-weight 400
        color $id_input

        .input
          flex 1
          height 100%
          border none
          background-color $common_bgc
          padding-left 10px
          padding-right 10px
          box-sizing border-box
          text-align right

        i
          font-size $address
          font-weight 400
          color $common_bgc

        .green
          color #4CAF50

    .pay-title
      font-size $address
      line-height 44px
      font-weight 500
      color $id_input

    .pay-type-list
      width 100%

      .pay-type-item
        height 110px
        display flex
        justify-content space-between
        align-items center
        font-size $address
        font-weight 400
        color $id_input

        .title
          display flex
          justify-content space-between
          align-items center

          .icon-card
            width 48px
            height 48px
            font-weight 400
            color $id_input
            margin-right 15px

        i
          font-size $address
          font-weight 400
          color $common_bgc

        .green
          color #4CAF50

.agreement-box
  margin-bottom 90px

.reminder
  margin-top 20px
  font-size $common_fz
  font-weight 400
  color #57606F
  line-height 32px
</style>
